<template>
	<view class="companyDetail">
		<uni-nav-bar1 title="企业详情" fixed leftIcon="arrowleft" statusBar :border="false" color="#fff"></uni-nav-bar1>
		<view class="tablist">
			<cover-view class="flex-box fixed">
				<cover-view class="flex-item" v-for="(item, index) in tabList" :key="index" @click="tabChange(index)"
					:class="{ active: index == curIndex }">
					{{ item.name }}
					<cover-view class="i"></cover-view>
				</cover-view>
			</cover-view>
		</view>
		<!-- company introduction -->
		<view class="company-profie" :style="'display:' + (curIndex == 0 ? 'block' : 'none')">
			<image class="banner" :src="detail.detailImgUrl" mode="aspectFill" />
			<view class="panel-box">
				<view class="tags flex-box">
					<view class="item flex-center" v-for="(item, index) in detail.tags" :key="index">{{ item }}</view>
				</view>
				<view class="company-tite ellipsis2">{{ detail.title }}</view>
				<view class="visit-line flex-start">
					<view class="point-list flex-start">
						<view class="item"></view>
						<view class="item"></view>
						<view class="item"></view>
						<view class="item"></view>
						{{ detail.score }}
					</view>
					<view class="txt">{{ detail.visitCount }} 最近浏览</view>
				</view>
				<view class="update-line flex-start">
					<view class="iconfont iconzhinanzhen"></view>气象监测
					<view class="tag flex-center">2分钟前更新</view>
				</view>
				<view class="data-line flex-row-center">
					<view class="flex-box">
						<view class="iconfont iconpengyouquan"></view>空气温度
						<view class="data ml10">{{ detail.temperature }}°C</view>
					</view>
					<view class="flex-box">
						<view class="iconfont icondiqiu"></view>空气湿度
						<view class="data ml10">{{ detail.humidity }}%rh</view>
					</view>
				</view>
				<view class="flex-box sunlight">
					<view class="iconfont iconphotovoltaic"></view>光照
					<view class="data ml10">{{ detail.amountOfSunlight }}Lux</view>
				</view>
			</view>
			<view class="border10"></view>
			<view class="panel-box">
				<view class="tit-box flex-start">
					<view class="i"></view>公司简介
				</view>
				<view class="company-desc" style="padding-top: 20rpx; line-height: 48rpx">{{ detail.companyIntroduce }}
				</view>
			</view>
			<view class="border10"></view>
			<view class="panel-box contact-box">
				<view class="tit-box flex-start">
					<view class="i"></view>联系方式
				</view>
				<view class="name">{{ detail.contacts }}</view>
				<view class="phone">{{ detail.contactNumber }}</view>
				<view class="flex-box address" v-if="detail.contactAddress">
					<view class="iconfont icondingwei"></view>
					{{ detail.contactAddress }}
				</view>
			</view>
			<view class="border10"></view>
			<view class="panel-box">
				<view class="tit-box flex-start">
					<view class="i"></view>特色优势
				</view>
			</view>
			<view class="con" style="padding: 20rpx; background:#fff;">
				<rich-text :nodes="detail.introduce"></rich-text>
			</view>
		</view>
		<!-- Digital agriculture -->
		<view class="digital-box" :style="'display:' + (curIndex == 1 ? 'block' : 'none')">
			<view class="panel">
				<view class="title">{{ detail.title }}</view>
				<image class="img" :src="detail.introduceImgUrl" mode="aspectFill"
					style="width: 630rpx; height: 472rpx; margin-bottom: 20rpx; background: #eee" />
				<view class="title">企业介绍</view>
				<view class="text" style="padding-bottom: 20rpx; color: #6a6e71; line-height: 48rpx">
					{{ detail.companyIntroduce }}</view>
				<view>
					<view class="title">卫星定位</view>
<!-- 					<view style="width: 630rpx; height: 200px;position: absolute;z-index: 99;">
					</view> -->
					<map v-if="detail.latitude" style="width: 630rpx;height: 300rpx"  
						  :enable-satellite="true" :markers="covers" :latitude="detail.latitude"
						:longitude="detail.longitude"></map>

					<!-- <map
            style="width: 100%; height: 300px;"
            :latitude="latitude"
            :longitude="longitude"
            :markers="covers"
          ></map>-->
				</view>
			</view>
			<view class="panel climate-box">
				<view class="title">气候条件</view>
				<view class="flex-start">
					<view class="label">经纬度</view>
					<view class="hr"></view>
					<view class="data">东经{{ detail.longitude }}，北纬{{ detail.latitude }}</view>
				</view>
				<view class="flex-start">
					<view class="label">气候类型</view>
					<view class="hr"></view>
					<view class="data">{{ detail.climate || "--" }}</view>
				</view>
				<view class="climate-charts">
					<view class="flex-box">
						<view class="tab flex-item flex-center" @click="chartIndex = 0"
							:class="{ active: chartIndex == 0 }">
							<view class="txt">降雨量</view>
						</view>
						<view class="tab flex-item flex-center" @click="chartIndex = 1"
							:class="{ active: chartIndex == 1 }">
							<view class="txt">日照时数</view>
						</view>
					</view>
					<view v-if="curIndex == 1 && chartIndex == 0">
						<view class="flex-start" style="padding: 20rpx 0 0 20rpx">
							<view class="label">年均降水量</view>
							<view class="hr"></view>
							<view class="data">{{ detail.rainfall || "--" }}</view>
						</view>
						<view class="charts-box">
							<qiun-data-charts type="column" :opts="options" :chartData="chartData" />
						</view>
						<view class="txt" style="padding: 20rpx">{{ detail.rainfallDesc }}</view>
					</view>
					<view v-if="curIndex == 1 && chartIndex == 1">
						<!-- <view class="flex-start" style="padding: 20rpx 0 0 20rpx">
              <view class="label">日照时数量</view>
              <view class="hr"></view>
              <view class="data">{{ detail.climate || "--" }}</view>
            </view> -->
						<view class="charts-box">
							<!-- <qiun-data-charts type="column" :opts="options" :chartData="chartData1" /> -->
							<qiun-data-charts type="line" :opts="{ extra: { line: { type: 'curve' } } }"
								:eopts="{ seriesTemplate: { smooth: true } }" :chartData="chartData1" :echartsH5="true"
								:echartsApp="true" />
						</view>
						<view class="txt" style="padding: 20rpx">{{ detail.sunlightDesc }}</view>
					</view>
				</view>
			</view>
			<view class="panel" v-if="detail.monitors.length">
				<view class="title">实时监控数据</view>
				<view class="btn-list flex-box">
					<view class="item flex-center" v-for="(item, index) in detail.monitors"
						:class="{ active: curMonitorIndex == index }" :key="index" @click="curMonitorIndex = index">
						{{ item.monitorName }}</view>
				</view>
				<view class="location"
					style="font-size: 24rpx; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #8f9bb3">
					{{ detail.monitors[curMonitorIndex].monitorAddress }}</view>
				<view class="monitor">
					<image src="../static/solid.png" style="position: absolute; width: 100%; height: 100%"
						mode="aspectFill" />
					<view class="con"
						style="position: absolute; width: 100%; height: 100%; z-index: 1; top: 0; left: 0">
						<view class="monitor-list flex-box">
							<view class="flex-start" style="width: 100%">
								<view class="label">光照度</view>
								{{ detail.monitors[curMonitorIndex].airHumidity }}Lux
							</view>
							<view class="flex-start">
								<view class="label">空气温度</view>
								{{ detail.monitors[curMonitorIndex].airHumidity }}°C
							</view>
							<view class="flex-start">
								<view class="label">空气湿度</view>
								{{ detail.monitors[curMonitorIndex].airTemperature }}%rh
							</view>
							<view class="flex-start">
								<view class="label">土壤温度</view>
								{{ detail.monitors[curMonitorIndex].soilTemperature }}°C
							</view>
							<view class="flex-start">
								<view class="label">土壤EC值</view>
								{{ detail.monitors[curMonitorIndex].soilEc }}dS/m
							</view>
						</view>
						<view class="time">{{ detail.monitors[curMonitorIndex].updateTime }}更新</view>
					</view>
				</view>
			</view>
		</view>
		<!-- Monitoring platform -->
		<view class="monitor-platform" :style="'display:' + (curIndex == 2 ? 'block' : 'none')">
			<view class="panel" v-if="detail.monitorPictures.length">
				<view class="title">实时监控图像</view>
				<image class="banner" :src="detail.monitorPictures[curMonitorPicture]"
					style="width: 630rpx; height: 472rpx; display: block" mode="aspectFill" />
				<scroll-view class="img-list" scroll-x>
					<view class="img-item" v-for="(item, index) in detail.monitorPictures" :key="index"
						:class="{ active: index == curMonitorPicture }" @click="changeImg(index)">
						<image class="img" :src="item" style="width: 180rpx; height: 135rpx" mode="aspectFill" />
					</view>
				</scroll-view>
			</view>
			<view class="panel">
				<view class="title">监督电话</view>
				<view class="name" style="color: #7a7f83; font-size: 34rpx; line-height: 54rpx">{{ detail.contacts }}
				</view>
				<view class="flex-start phone-box">
					<view class="label iconfont iconzixun"></view>
					<view class="data">{{ detail.contactNumber }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				curIndex: 0,
				tabList: [{
					name: "公司简介"
				}, {
					name: "数字农业"
				}, {
					name: "监控平台"
				}],
				curMonitorPicture: 0,
				curMonitorIndex: 0,
				detail: {
					monitorPictures: [],
					monitors: [],
					tags: [],
					rainfalls: [],
					sunlights: [],
					latitude: 0,
					longitude: 0,
				},
				chartIndex: 0,
				chartData: {
					categories: [],
					series: [{
						name: "降水量",
						data: [],
					}, ],
				},
				chartData1: {
					categories: [],
					series: [{
						name: "日照量",
						data: [],
					}, ],
				},
				// options: {
				//   yAxis: {
				//     data: [{ min: 0 }]
				//   },
				//   enableMarkLine: true,
				//   extra: {
				//     column: {
				//       seriesGap: 5
				//     },
				//     markLine: { data: [{ value: 15, showLabel: true }] }
				//   }
				// },
				// latitude: 39.909,
				// longitude: 116.39742,
				latitude: 23.198654392209733,
				longitude: 113.35288277173234,
				covers: [{
					latitude: 23.198654392209733,
					longitude: 113.35288277173234,
					iconPath: "../../../static/location.png",
				}],
			};
		},
		onLoad(options) {
			this.getData(options.id);
		},
		methods: {
			tabChange(index) {
				this.curIndex = index;
			},
			getData(id) {
				this.$axios({
					method: "get",
					url: `farm/detail/${id || 1}`,
				}).then((res) => {
					this.detail = res;
					// this.detail.latitude = 23.198654392209733;
					// this.detail.longitude = 113.35288277173234;
					
					this.covers.latitude = this.detail.latitude;
					this.covers.longitude = this.detail.longitude;
				 

						let rainfalls = [];
					let rainfallsTime = [];
					res.rainfalls.forEach((item,index) => {
						rainfalls.push(item.rainfall);
						if(index%2==0)
						{
						rainfallsTime.push(item.logTime);
						}else{
						rainfallsTime.push('');
						}
					});

					this.chartData.categories = rainfallsTime;
					this.chartData.series[0].data = rainfalls;

					let sunlights = [];
					let sunlightsTime = [];
					res.sunlights.forEach((item,index) => {
						sunlights.push(item.amountOfSunlight);
						if(index%2==0)
						{
						sunlightsTime.push(item.logTime);
						}else{
						sunlightsTime.push('');
						}
					});

					this.chartData1.categories = sunlightsTime;
					this.chartData1.series[0].data = sunlights;
					// console.log(this.chartData)
					// console.log(this.chartData1)
					 
					// console.log(this.detail)
				});
			},
			changeImg(index) {
				this.curMonitorPicture = index;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.companyDetail {
		width: 750rpx;
		overflow: hidden;

		.panel {
			overflow: hidden;
		}
	}

	.climate-charts {
		width: 622rpx;
		min-height: 686rpx;
		border-radius: 8rpx;
		border: 2rpx solid #edf1f7;

		.flex-box {
			text-align: center;
			line-height: 68rpx;
			border-bottom: 2rpx solid #edf1f7;
		}

		.tab {
			&:first-child {
				border-right: 2rpx solid #edf1f7;
			}

			&.active {
				color: $primary;

				.txt {
					position: relative;

					&:before {
						position: absolute;
						content: "";
						top: 22rpx;
						left: -48rpx;
						width: 24rpx;
						height: 24rpx;
						background: $primary;
						border-radius: 24rpx;
					}
				}
			}
		}
	}

	.climate-box {
		color: #8f9bb3;

		.flex-start {
			margin-bottom: 20rpx;
		}

		.label {
			font-size: 26rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #8f9bb3;
			line-height: 36rpx;
		}

		.hr {
			width: 2rpx;
			height: 36rpx;
			margin: 0 22rpx;
			background: #edf1f7;
			border-radius: 1px;
		}
	}

	.charts-box {
		height: 540rpx;
	}

	.tablist {
		text-align: center;
		height: 96rpx;
		color: #8f9bb3;
		font-size: 30rpx;
		line-height: 96rpx;

		.flex-item {
			height: 96rpx;
			text-align: center;
			line-height: 96rpx;
			position: relative;
		}

		.fixed {
			position: fixed;
			width: 100%;
			height: 96rpx;
			text-align: center;
			line-height: 96rpx;
			background: #fff;
			z-index: 100;
		}

		.i {
			position: absolute;
			content: "";
			height: 4rpx;
			width: 40rpx;
			left: 50%;
			bottom: 0;
			background-color: #64ba02;
			transform: translate(-50%);
			display: none;
		}

		.active {
			color: #64ba02;
			font-weight: 500;

			.i {
				display: block;
			}
		}
	}

	.ml10 {
		margin-left: 10rpx;
	}

	.border10 {
		height: 32rpx;
		background: #fafafa;
		box-shadow: 0px -2px 0px 0px rgba(241, 240, 245, 1);
	}

	.banner {
		display: block;
		width: 100%;
		height: 75vw;
		// height: auto;
	}

	.company-profie {
		.iconfont {
			height: 32rpx;
			margin-right: 16rpx;
			font-size: 32rpx;
			line-height: 32rpx;
			color: #14ac69;
		}

		.sunlight {
			margin-top: 16rpx;
			color: #7a7f83;
			font-size: 24rpx;
			line-height: 32rpx;
		}

		.panel-box {
			padding: 34rpx 48rpx;
		}

		.tags {
			flex-wrap: wrap;

			.item {
				min-width: 150rpx;
				height: 48rpx;
				padding: 0 20rpx;
				margin-right: 32rpx;
				margin-bottom: 12rpx;
				background: rgba(132, 209, 87, 0.1);
				border-radius: 26rpx;
				font-weight: 500;
				color: #14ac69;
				font-size: 24rpx;
			}
		}

		.company-tite {
			font-size: 56rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #383f45;
			line-height: 80rpx;
		}

		.point-list {
			font-size: 24rpx;
			font-family: AvenirNext-Bold, AvenirNext;
			font-weight: bold;
			color: #fa6400;
			line-height: 32rpx;
			margin-right: 28rpx;

			.item {
				width: 16rpx;
				height: 16rpx;
				background: #fa6400;
				margin-right: 16rpx;
				border-radius: 16rpx;
			}
		}

		.visit-line {
			margin-top: 10rpx;

			.txt {
				font-size: 24rpx;
				font-family: AvenirNext-DemiBold, AvenirNext;
				font-weight: 600;
				color: #7a7f83;
				line-height: 32rpx;
			}
		}

		.update-line {
			margin-top: 30rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #7a7f83;
			line-height: 40rpx;

			.tag {
				min-width: 150rpx;
				height: 48rpx;
				padding: 0 20rpx;
				margin-left: 36rpx;
				background: rgba(132, 209, 87, 0.1);
				border-radius: 26rpx;
				font-weight: 500;
				color: #14ac69;
				font-size: 24rpx;
			}
		}

		.data-line {
			margin-top: 16rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #7a7f83;
			line-height: 32rpx;

			.data {
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #ff9800;
				line-height: 34rpx;
			}
		}

		.tit-box {
			font-size: 34rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #383f45;
			line-height: 48rpx;

			.i {
				width: 10rpx;
				height: 36rpx;
				margin-right: 16rpx;
				background: linear-gradient(101deg, #43a047 0%, #53aa57 20%, #71bd74 77%, #81c784 100%);
			}
		}

		.contact-box {
			.name {
				margin-top: 38rpx;
				font-size: 34rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #383f45;
				line-height: 48rpx;
			}

			.phone {
				font-size: 34rpx;
				font-family: AvenirNext-Regular, AvenirNext;
				font-weight: 400;
				color: #7a7f83;
				line-height: 54rpx;
			}

			.address {
				font-size: 28rpx;
				font-family: AvenirNext-Medium, AvenirNext;
				font-weight: 500;
				color: #7a7f83;
				line-height: 38rpx;
			}
		}
	}

	.digital-box {
		width: 750rpx;
		overflow: hidden;
		padding: 22rpx 0;
	}

	.panel {
		width: 686rpx;
		padding: 28rpx;
		margin: 0 auto 32rpx;
		background: #ffffff;
		box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(198, 218, 248, 0.25);
		border-radius: 16rpx;
		border: 2rpx solid #ebf0f9;

		.title {
			margin-top: 10rpx;
			margin-bottom: 20rpx;
			font-size: 34rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #222b45;
			line-height: 32rpx;
		}
	}

	.btn-list {
		flex-wrap: wrap;

		.item {
			min-width: 164rpx;
			padding: 0 20rpx;
			height: 64rpx;
			margin: 0 24rpx 24rpx 0;
			background: rgba(132, 209, 87, 0.1);
			border-radius: 16rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #14ac69;

			&.active {
				color: #fff;
				background: #64ba02;
				box-shadow: 0px 8px 10px 0px rgba(132, 209, 87, 0.2);
			}
		}
	}

	.monitor {
		position: relative;
		width: 630rpx;
		height: 512rpx;
		background-size: 100%;
		margin-top: 10rpx;

		.monitor-list {
			margin-top: 24rpx;
			padding: 46rpx 0 0 46rpx;
			flex-wrap: wrap;
			font-size: 32rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #000000;

			.flex-start {
				margin-bottom: 32rpx;
				padding-right: 44rpx;
			}

			.label {
				margin-right: 16rpx;
				font-size: 20rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #8f9bb3;
			}
		}

		.time {
			position: absolute;
			right: 20rpx;
			bottom: 22rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #8f9bb3;
			line-height: 36prx;
		}
	}

	.monitor-platform {
		padding-top: 22rpx;

		.phone-box {
			margin-top: 16rpx;
			font-size: 30rpx;

			.label {
				width: 64rpx;
				height: 64rpx;
				margin-right: 32rpx;
				color: #fff;
				text-align: center;
				line-height: 64rpx;
				background: #64ba02;
				border-radius: 20rpx;
			}
		}

		.img-list {
			margin-top: 20rpx;
			white-space: nowrap;
			-webkit-overflow-scrolling: touch;
		}

		.img-item {
			position: relative;
			display: inline-block;
			width: 180rpx;
			height: 140rpx;
			margin-right: 20rpx;
			background: #eee;

			&:last-child {
				margin-right: 0;
			}

			&:before {
				position: absolute;
				content: "";
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.5);
				z-index: 2;
			}

			&.active:before {
				display: none;
			}
		}
	}
</style>
<style lang="scss">
	.cell-detail {
		.van-cell {
			padding: 10rpx 0;
			background: transparent;

			.van-cell__right-icon,
			.van-cell__value {
				color: #6d7278;
				font-size: 24rpx;
			}
		}
	}
</style>
